Indra Sudirman

This is just notes for me.



Menampilkan code/kodingan di blog/website dengan Github

IndraSudirman
Terkadang kalau ketemu website/blog buat pada saat cari referensi code/kodingan saya lebih suka sama yang menampilkan/menempelkan code yang di-embedded dari Github. Cara itu lebih memudahkan orang lain yang membaca dan kadang kalau males ketik code bisa langsung copy-paste dengan mudah trus diedit beberapa variabel trus run dah. Jika berhasil atau dapat pencerahan saya biasanya baru diketik ulang, sambil membaca lagi code secara perlahan.

Berdasarkan dari pengalaman itu, saya jadi tertarik buat cari tahu caranya menempelkan code dari Github ke blog. Saya pikir caranya bakal ribet dan sedikit susah. Tapi ternyata sangat mudah sekali. Saya menemukan tulisan ini dan sang penulis menjelaskan dengan mudah dipahami buat pemula seperti saya 😀

Langsung saja ke topicnya, caranya adalah :

  1. Masuk ke website gist.github.com dari link ini gist.github.com.
  2. Setelah itu, akan tampil tampilan seperti gambar di bawah ini .

    Gist Github


  3. Gambar no 1 diisi dengan Deskripsi codenya. Kalau Deskripsi bebas ya, sesuai dengan apa yang akan dibuat di gist-githubnya Contohnya, karena saya akan menempelkan code tentang Dropdown nama siswa di Google Form. Berarti di deskripsi saya buat Code untuk membuat Dropdown Nama Responses di Google Form.
    Gambar no 2 diisi nama file codenya, beserta ekstensinya. Contoh saya buat Code.gs.
    Gambar no 3 diisi seluruh codenya, yang akan di embedded ke blog/website.
    Gambar no 4 Ada tombol save, sekaligus menjadikan code yang sudah dibuat di gist-github menjadi public atau bisa diakses oleh siapa saja di internet.

  4. Hasilnya punya saya akan seperti ini :

    Code untuk membuat Dropdown Nama Responses di Google Form

    Gist Github With Code

    Kemudian tinggal klik tombol pada gambar 5, untuk copy kemudian nanti paste di blog/website. Kerennya gist-github ini, yang dicopy hanya script JavaScript jadi pendek sekali. Trus jika dipaste diblog/website sudah menyesuaikan dengan frame sebelumnya. Jadi dah fit dah tampilannya.

  5. Contohnya, saya paste embedded gist github seperti ini :

    Embedded Gist Github in Code

    Hasilnya seperti pada note saya yang disini di nomor 6 ya.


Semoga berhasil bagi yang mencoba 😊, demikian note saya.

Referensi : https://medium.com/@aryamurali/embed-code-in-medium-e95b839cfdda